<!-- 原始记录新建、编辑、详情 -->
<script lang="ts" setup name="primitiveLogAdd">
import { ref } from 'vue'
import dayjs from 'dayjs'
import { ElMessage, ElMessageBox } from 'element-plus'
import type { FormInstance } from 'element-plus'
import EnvironmentalDialog from '../components/environmentalDialog.vue'
import selectSample from '../components/selectSample.vue'
import selectTemplate from '../components/selectTemplate.vue'
import selectMeasureDevice from '../components/selectMeasureDevice.vue'
import SelectFiles from '../components/selectFiles.vue'
import type { columnsType, dictType } from './primitiveLogList'
import { UploadFile } from '@/api/measure/file'
import useUserStore from '@/store/modules/user'
import showPhoto from '@/views/system/tool/showPhoto.vue'
import { getDictByCode } from '@/api/system/dict'
import type { IEnvironmental } from '@/views/business/lab/environmental/environmentalList_interface'
import selectOrder from '@/views/business/schedule/interchangeReceipt/selectOrder.vue'
import type { fixedAssetsType } from '@/views/device/standingBook/standingBook-interface'
import type { fileListType } from '@/views/measure/file/file-interface'
import { addPrimitiveLog, getPrimitiveLogDetail, updatePrimitiveLog } from '@/api/business/lab/primitiveLogList'
const infoId = ref('') // id-原始记录列表id
const pageType = ref('add') // 页面类型: add,edit, detail
const textMap: { [key: string]: string } = {
  edit: '编辑',
  add: '新建',
  detail: '详情',
} // 字典
const selectIndex = ref() // 所用设备表格-点击选择的index--点击第几行
const selectFliesIndex = ref() // 技术文件表格-点击选择的index---点击第几行
const mesureCategoryList = ref<dictType[]>([]) // 校检类别
const orderVisible = ref(false) // 控制委托书对话框显隐
const sampleVisible = ref(false) // 控制选择样品对话框显隐
const measureDeviceVisible = ref(false) // 控制选择测量设备对话框显隐
const filesVisible = ref(false) // 控制选择技术文件对话框显隐
const checkoutMeasureDeviceList = ref([]) // 所用设备多选
const checkoutFilesList = ref([]) // 技术文件多选
// 从路由中获取页面类型参数
const $route = useRoute()
const { username } = useUserStore()
// 路由参数
if ($route.params && $route.params.type) {
  pageType.value = $route.params.type as string
  infoId.value = $route.params.id as string
}
// 检验是否为空的ref
const ruleFormRef = ref<FormInstance>()
// 新建上传参数--用于调接口上传
const formInline = ref({
  originalRecordCode: '', // 原始记录编号
  originalRecordName: '', // 原始记录名称
  measureCategory: '', // 检校类别
  calibrationTime: '', // 		检校时间
  environmentId: '', // 环境记录单id
  calibrationPlace: '', // 检校地点
  orderId: '', // 	委托书id
  customerId: '', // 	委托方id
  sampleId: '', // 	样品id
  templateId: '', // 	原始记录模板id
  templateName: '', // 原始记录模板名称
  originalRecordFile: '', // 	minio存储文件名--附件
  remark: '', // 备注
  createUser: '', // 创建人id
  businessEnvironmentRecord: {
    temperature: '', // 环境记录单温度
    humidity: '', // 环境记录单相对湿度
    environmentCode: '', // 环境记录单编号
  }, // 环境记录单信息
  businessOrder: { // 委托书
    orderCode: '', // 委托书编号
    customerNo: '', // 委托方代码
    customerName: '', // 委托方名称
    customerPhone: '', // 委托方电话
    customerAddress: '', // 委托方地址
    planDeliverTime: '', // 预计送达时间
    requireOverTime: '', // 要求检完时间
  },
  customerSampleInfo: { // 样品信息
    sampleNo: '', // 样品编号
    sampleName: '', // 样品名称
    manufacturingNo: '', // 出厂编号
    sampleModel: '', // 型号
    manufacturer: '', // 生产厂家
    deliverer: '', // 送检人
    delivererTel: '', // 送检人联系方式
    measureContent: '', // 检定项目
  },
  equipmentInfoList: [] as any, // 测量设备
  fileList: [] as any, // 技术文件
})

// 所用设备表头
const columns = ref<columnsType[]>([
  {
    text: '设备名称',
    value: 'equipmentName',
    align: 'center',
    width: '240',
    required: true,
    choose: true,
    time: false,
  },
  {
    text: '设备编号',
    value: 'equipmentNo',
    align: 'center',
    width: '160',
    required: true,
    choose: false,
    time: false,
  },
  {
    text: '型号',
    value: 'modelNo',
    align: 'center',
    required: true,
    choose: false,
    time: false,
  },
  {
    text: '出厂编号',
    value: 'manufacturingNo',
    align: 'center',
    required: true,
    choose: false,
    time: false,
  },
  {
    text: '证书有效期',
    value: 'validDate',
    width: '120',
    align: 'center',
    required: true,
    choose: false,
    time: false,
  },
])
// 所依据的技术文件表头
const columnsFiles = ref<columnsType[]>([
  {
    text: '文件编号',
    value: 'fileNo',
    align: 'center',
    width: '240',
    required: true,
    choose: true,
    time: false,
  },
  {
    text: '文件名称',
    value: 'fileName',
    align: 'center',
    required: true,
    choose: false,
    time: true,
  },
  {
    text: '文件代号',
    value: 'fileCode',
    align: 'center',
    required: true,
    time: false,
    choose: false,
  },
])
// 初始化路由
const $router = useRouter()
// 关闭
const close = () => {
  $router.back()
}
// 表单验证规则
const rules = ref({
  'originalRecordName': [{ required: true, message: '原始记录名称必填', trigger: ['blur', 'change'] }],
  'measureCategory': [{ required: true, message: '校验类别必填', trigger: ['blur', 'change'] }],
  'calibrationTime': [{ required: true, message: '校验时间必填', trigger: ['blur', 'change'] }],
  // 'businessEnvironmentRecord.environmentCode': [{ required: true, message: '环境记录单编号必填', trigger: ['blur', 'change'] }],
  'calibrationPlace': [{ required: true, message: '校验地点必填', trigger: ['blur', 'change'] }],
  'businessEnvironmentRecord.temperature': [
    { required: true, message: '温度必填', trigger: ['blur', 'change'] },
    { pattern: /(^-?\d\d*\.\d*$)|(^-?\d\d*$)|(^-?\.\d\d*$)/, message: '温度只能为数字', trigger: ['blur', 'change'] },
  ],
  'businessEnvironmentRecord.humidity': [{ required: true, message: '相对湿度必填', trigger: ['blur', 'change'] },
    { pattern: /(^-?\d\d*\.\d*$)|(^-?\d\d*$)|(^-?\.\d\d*$)/, message: '相对湿度只能为数字', trigger: ['blur', 'change'] },
  ],
  'businessOrder.orderCode': [{ required: true, message: '委托书编号必填', trigger: ['blur', 'change'] }],
  'businessOrder.customerNo': [{ required: true, message: '委托方代码必填', trigger: ['blur', 'change'] }],
  'businessOrder.customerName': [{ required: true, message: '委托方名称必填', trigger: ['blur', 'change'] }],
  // 'businessOrder.customerPhone': [{ required: true, message: '委托方电话必填', trigger: ['blur', 'change'] }],
  // 'businessOrder.customerAddress': [{ required: true, message: '委托方地址必填', trigger: ['blur', 'change'] }],
  'customerSampleInfo.sampleNo': [{ required: true, message: '样品编号必填', trigger: ['blur', 'change'] }],
  'customerSampleInfo.sampleName': [{ required: true, message: '样品名称必填', trigger: ['blur', 'change'] }],
  'customerSampleInfo.manufacturingNo': [{ required: true, message: '出厂编号必填', trigger: ['blur', 'change'] }],
  'customerSampleInfo.sampleModel': [{ required: true, message: '样品型号必填', trigger: ['blur', 'change'] }],
  // 'customerSampleInfo.manufacturer': [{ required: true, message: '生产厂家必填', trigger: ['blur', 'change'] }],
  'customerSampleInfo.measureContent': [{ required: true, message: '检定项目必填', trigger: ['blur', 'change'] }],
  'templateName': [{ required: true, message: '原始记录模板必填', trigger: ['blur', 'change'] }],
})

// 获取字典值
async function getDict() {
  // 校检类别
  const response = await getDictByCode('measureCategory')
  mesureCategoryList.value = response.data
}

// 点击文件预览
const uploadShow = (e: any) => {
  const URL = window.URL || window.webkitURL
  window.open(URL.createObjectURL(e.raw))
}

const fileRef = ref() // 文件上传input
const onFileChange = (event: any) => {
  // 原生上传
  if (event.target.files?.length !== 0) {
    // 创建formdata对象
    const fd = new FormData()
    fd.append('multipartFile', event.target.files[0])
    UploadFile(fd).then((res) => {
      if (res.code === 200) {
        formInline.value.originalRecordFile = res.data[0]
        // 重置当前验证
        ElMessage.success('文件上传成功')
      }
      else {
        ElMessage.error(res.message)
      }
    })
  }
}
const upload = () => {
  fileRef.value.click()
}

// 检查表格第几行信息未完善
const checkList = (list: any, no: string, name: string) => {
  const index = list.findIndex((item: any) => !item[no] && !item[name])
  if (index !== -1) {
    return index + 1
  }
  else {
    return 'pass'
  }
}

// 点击保存
const save = async (formEl: FormInstance | undefined) => {
  if (!formInline.value.equipmentInfoList.length) {
    ElMessage.warning('所用设备不能为空')
    return
  }
  else {
    // 检查表格是否存在增加行信息没有完善的情况
    const result = checkList(formInline.value.equipmentInfoList, 'equipmentNo', 'equipmentName')
    if (result !== 'pass') {
      ElMessage.warning(`所用设备表格第${result}行信息未完善`)
      return
    }
  }
  // if (!formInline.value.fileList.length) {
  //   ElMessage.warning('所依据的技术文件不能为空')
  //   return
  // }
  // else {
  //   // 检查表格是否存在增加行信息没有完善的情况
  //   const result = checkList(formInline.value.fileList, 'fileNo', 'fileName')
  //   if (result !== 'pass') {
  //     ElMessage.warning(`所依据的技术文件表格第${result}行信息未完善`)
  //     return
  //   }
  // }

  // if (formInline.value.fileList.length) {
  //   // 检查表格是否存在增加行信息没有完善的情况
  //   const result = checkList(formInline.value.fileList, 'fileNo', 'fileName')
  //   if (result !== 'pass') {
  //     ElMessage.warning(`所依据的技术文件表格第${result}行信息未完善`)
  //     return
  //   }
  // }
  if (!formEl) { return }
  await formEl.validate((valid) => {
    if (valid) {
      ElMessageBox.confirm('确认保存吗？', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        const params = {
          temperature: formInline.value.businessEnvironmentRecord.temperature,
          humidity: formInline.value.businessEnvironmentRecord.humidity,
          ...formInline.value,
        }
        if (pageType.value === 'add') { // 新建
          addPrimitiveLog(params).then((res) => {
            if (res.code === 200) {
              ElMessage.success('保存成功！')
              close()
            }
          })
        }
        else if (pageType.value === 'edit') { // 编辑
          updatePrimitiveLog(params).then((res) => {
            if (res.code === 200) {
              ElMessage.success('保存成功！')
              close()
            }
          })
        }
      })
    }
  })
}

// -------------------------------选择环境记录单----------------------------------------
// 选择环境记录单Ref
const environmentalDialog = ref()
// 选择环境记录单
const environmentalClick = () => {
  environmentalDialog.value.initDialog()
}
// 选择环境记录单表格确认
const environmentalAdd = (data: IEnvironmental) => {
  formInline.value.environmentId = data.id // 环境记录单id
  formInline.value.businessEnvironmentRecord = data // 环境记录单信息
}

// ------------------------------------委托书------------------------------------------
// 点击选择委托书编号
const handleClickOrder = () => {
  orderVisible.value = true
}
// 修改委托书对话框显隐
const changeOrderVisible = (val: boolean) => {
  orderVisible.value = val
}
// 选好委托书
const confirmCheckoutOrder = (val: any) => {
  if (val && val.length) {
    formInline.value.orderId = val[0].id // 委托书id
    formInline.value.customerId = val[0].customerId// 委托方id
    formInline.value.businessOrder = val[0]
  }
}
// --------------------------------------样品-------------------------------------------
// 点击选择样品
const handleClickSample = () => {
  if (!formInline.value.orderId) {
    ElMessage.warning('请先选择委托书')
    return
  }
  sampleVisible.value = true
}

// 修改委托方对话框显隐
const changeSampleVisible = (val: boolean) => {
  sampleVisible.value = val
}
// 选好样品
const clickConfirmSample = (val: any) => {
  if (val && val.length) {
    formInline.value.sampleId = val[0].id// 样品id
    formInline.value.customerSampleInfo = val[0] // 样品信息
  }
}

// --------------------------------------原始记录模板-----------------------------------
// 选择原始记录模板Ref
const templateDialog = ref()
// 选择原始记录模板
const handleClickTemplate = () => {
  templateDialog.value.initDialog()
}
// 选择原始记录模板确认
const confirmCheckoutTemplate = (val: any) => {
  formInline.value.templateId = val.id// 	原始记录模板id
  formInline.value.templateName = val.templateName// 原始记录模板名称
}

// ----------------------------------------所用设备-------------------------------------
const isMultiMeasureDevice = ref(false)
// 点击批量增加
const multiAddMeasureDevice = () => {
  isMultiMeasureDevice.value = true // 是否多选
  measureDeviceVisible.value = true
}
// 点击所用设备增加行
const addMeasureDeviceRow = () => {
  if (formInline.value.equipmentInfoList && formInline.value.equipmentInfoList.length) {
    const index = formInline.value.equipmentInfoList.findIndex((item: fixedAssetsType) =>
      !item.equipmentNo && !item.equipmentName)
    if (index !== -1) {
      ElMessage.warning('请完善上一条设备信息')
      return
    }
  }
  formInline.value.equipmentInfoList.push({
    equipmentName: '', // 设备名称
    equipmentNo: '', // 设备编号
    modelNo: '', // 型号
    validDate: '', // 有效日期
    manufacturingNo: '', // 出厂编号
  })
}

const handleSelectionChangeMeasureDevice = (e: any) => {
  checkoutMeasureDeviceList.value = e
}

// 点击所用设备删除行
const delMeasureDeviceRow = () => {
  if (checkoutMeasureDeviceList.value.length <= 0) {
    ElMessage({
      message: '请选中要删除的行',
      type: 'warning',
    })
  }
  else {
    checkoutMeasureDeviceList.value.forEach((item: fixedAssetsType) => {
      formInline.value.equipmentInfoList.forEach((element: fixedAssetsType, index: number) => {
        if (element.equipmentNo === item.equipmentNo) {
          formInline.value.equipmentInfoList.splice(index, 1)
        }
      })
    })
  }
}

// 点击选择测量设备编号
const handleClickMeasureDevice = (index: number) => {
  measureDeviceVisible.value = true
  selectIndex.value = index
  isMultiMeasureDevice.value = false
}
// 修改测量设备对话框显隐
const changeMeasureDeviceVisible = (val: boolean) => {
  measureDeviceVisible.value = val
}
// 选好测量设备
const confirmCheckoutMeasureDevice = (val: any) => {
  if (val && val.length) {
    if (isMultiMeasureDevice.value) { // 批量增加
      val.forEach((item: any) => {
        const index = formInline.value.equipmentInfoList.findIndex((i: fixedAssetsType) => item.equipmentNo === i.equipmentNo)
        if (index === -1) {
          formInline.value.equipmentInfoList.push(item)
        }
      })
    }
    else { // 增加行
      const index = formInline.value.equipmentInfoList.findIndex((i: fixedAssetsType) => val[0].equipmentNo === i.equipmentNo)
      if (index !== -1) {
        ElMessage.warning('此设备已添加过')
        return
      }
      formInline.value.equipmentInfoList.splice(selectIndex.value, 1, val[0])
    }
  }
}

// ------------------------------------------技术文件----------------------------------
const isMultiFiles = ref(false)
// 点击批量增加
const multiAddFiles = () => {
  isMultiFiles.value = true
  filesVisible.value = true
}
// 点击技术文件增加行
const addFilesRow = () => {
  const index = formInline.value.fileList.findIndex((item: fileListType) =>
    !item.fileNo && !item.fileName)
  if (index !== -1) {
    ElMessage.warning('请完善上一条文件信息')
    return
  }
  formInline.value.fileList.push({
    fileNo: '', // 编号
    fileName: '', // 名称
    fileCode: '', // 文件号
  })
}

// 技术文件表格多选
const handleSelectionChangeFiles = (e: any) => {
  checkoutFilesList.value = e
}
// 点击技术文件删除行
const delFilesRow = () => {
  if (checkoutFilesList.value.length <= 0) {
    ElMessage({
      message: '请选中要删除的行',
      type: 'warning',
    })
  }
  else {
    checkoutFilesList.value.forEach((item: fileListType) => {
      formInline.value.fileList.forEach((element: fileListType, index: number) => {
        if (element.fileNo === item.fileNo) {
          formInline.value.fileList.splice(index, 1)
        }
      })
    })
  }
}

// 点击选择文件编号
const handleClickFiles = (index: number) => {
  filesVisible.value = true
  selectFliesIndex.value = index
  isMultiFiles.value = false
}
// 修改技术文件对话框显隐
const changeFilesVisible = (val: boolean) => {
  filesVisible.value = val
}
// 选好文件
const confirmCheckoutFiles = (val: any) => {
  if (val && val.length) {
    if (isMultiFiles.value) { // 批量增加
      val.forEach((item: any) => {
        const index = formInline.value.fileList.findIndex((i: fileListType) => item.fileNo === i.fileNo)
        if (index === -1) {
          formInline.value.fileList.push(item)
        }
      })
    }
    else {
      const index = formInline.value.fileList.findIndex((i: fileListType) => val[0].fileNo === i.fileNo)
      if (index !== -1) {
        ElMessage.warning('此文件已添加过')
        return
      }
      formInline.value.fileList.splice(selectFliesIndex.value, 1, val[0])
    }
  }
}

// -------------------------------------------底部-------------------------------------------

// 打印
const printObj = ref({
  id: 'form', // 需要打印元素的id
  popTitle: '原始记录详情', // 打印配置页上方的标题
  extraHead: '<div style="display: flex;flex-direction: column;text-align: center"><h3>原始记录详情</h3></div>', // 最上方的头部文字，附加在head标签上的额外标签，使用逗号分割
  preview: false, // 是否启动预览模式，默认是false
  standard: '',
  extarCss: '',
})

// 获取详情信息
const fetchDetail = () => {
  if (infoId.value) {
    getPrimitiveLogDetail({ id: infoId.value }).then((res) => {
      formInline.value = res.data
      if (res.data.equipmentInfoList && res.data.equipmentInfoList.length) {
        formInline.value.equipmentInfoList = res.data.equipmentInfoList.map((item: fixedAssetsType) => {
          return {
            ...item,
            validDate: item.validDate ? dayjs(item.validDate).format('YYYY-MM-DD') : '',
          }
        })
      }
      else {
        formInline.value.equipmentInfoList = []
      }
      formInline.value.fileList = res.data.fileList || []
      // 未选择环境记录单
      if (res.data.temperature && res.data.humidity) {
        formInline.value.businessEnvironmentRecord.temperature = res.data.temperature
        formInline.value.businessEnvironmentRecord.humidity = res.data.humidity
      }
    })
  }
}

onMounted(() => {
  getDict() // 获取字典
  if (pageType.value === 'edit' || pageType.value === 'detail') { // 编辑和详情
    fetchDetail()
  }
  else { // 新建
    const params = $route.query
    console.log('ppppp', params)

    formInline.value = {
      originalRecordCode: '', // 原始记录编号
      originalRecordName: '', // 原始记录名称
      measureCategory: '', // 检校类别
      calibrationTime: '', // 		检校时间
      environmentId: '', // 环境记录单id
      calibrationPlace: '', // 检校地点
      orderId: params.orderId as string, // 	委托书id
      customerId: params.customerId as string, // 	委托方id
      sampleId: params.sampleId as string, // 	样品id
      templateId: '', // 	原始记录模板id
      templateName: '', // 原始记录模板名称
      originalRecordFile: '', // 	minio存储文件名--附件
      remark: '', // 备注
      createUser: '', // 创建人id
      businessEnvironmentRecord: {
        temperature: '', // 环境记录单温度
        humidity: '', // 环境记录单相对湿度
        environmentCode: '', // 环境记录单编号
      }, // 环境记录单信息
      businessOrder: { // 委托书
        orderCode: params.orderCode as string || '', // 委托书编号
        customerNo: params.customerNo as string || '', // 委托方代码
        customerName: params.customerName as string || '', // 委托方名称
        customerPhone: params.phone as string || '', // 委托方电话
        customerAddress: params.customerAddress as string || '', // 委托方地址
        planDeliverTime: params.planDeliverTime as string || '', // 预计送达时间
        requireOverTime: params.requireOverTime as string || '', // 要求检完时间
      },
      customerSampleInfo: { // 样品信息
        sampleNo: params.sampleNo as string || '', // 样品编号
        sampleName: params.sampleName as string || '', // 样品名称
        manufacturingNo: params.manufacturingNo as string || '', // 出厂编号
        sampleModel: params.sampleModel as string || '', // 型号
        manufacturer: params.manufacturer as string || '', // 生产厂家
        deliverer: params.deliverer as string || '', // 送检人
        delivererTel: params.delivererTel as string || '', // 送检人联系方式
        measureContent: params.measureContent as string || '', // 检定项目
      },
      equipmentInfoList: [] as any, // 测量设备
      fileList: [] as any, // 技术文件
    }
  }
})
</script>

<template>
  <app-container>
    <detail-page :title="`原始记录 -- ${textMap[pageType]}`">
      <template #btns>
        <el-button
          v-if="pageType !== 'detail'"
          type="primary"
          @click="save(ruleFormRef)"
        >
          保存
        </el-button>
        <el-button v-else v-print="printObj" type="primary">
          打印
        </el-button>
        <el-button type="info" @click="close">
          关闭
        </el-button>
      </template>
      <el-form
        id="form"
        ref="ruleFormRef"
        :model="formInline"
        label-position="right"
        label-width="auto"
        :rules="rules"
      >
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="原始记录编号:">
              <el-input
                v-model.trim="formInline.originalRecordCode"
                placeholder="系统自动生成"
                class="full-width-input"
                disabled
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="原始记录名称:" prop="originalRecordName">
              <el-input
                v-model.trim="formInline.originalRecordName"
                :placeholder="pageType === 'detail' ? '' : '请输入原始记录名称'"
                class="full-width-input"
                clearable
                :disabled="pageType === 'detail'"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="检校类别:" prop="measureCategory">
              <el-select
                v-model="formInline.measureCategory"
                clearable
                :placeholder="pageType === 'detail' ? '' : '请选择检校类别'"
                size="default"
                style="width: 100%;"
                :disabled="pageType === 'detail'"
              >
                <el-option
                  v-for="item in mesureCategoryList"
                  :key="item.value"
                  :label="item.name"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="检校时间:" prop="calibrationTime">
              <el-date-picker
                v-model="formInline.calibrationTime"
                type="datetime"
                style="width: 100%;"
                clearable
                :placeholder="pageType === 'detail' ? '' : '请选择检校时间'"
                format="YYYY-MM-DD hh:mm:ss"
                value-format="YYYY-MM-DD hh:mm:ss"
                :disabled="pageType === 'detail'"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item
              label="检校地点:"
              prop="calibrationPlace"
            >
              <el-input
                v-model.trim="formInline.calibrationPlace"
                :placeholder="pageType === 'detail' ? '' : '请输入检校地点'"
                class="full-width-input"
                :disabled="pageType === 'detail'"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="环境记录单编号:" prop="businessEnvironmentRecord.environmentCode">
              <el-input
                v-model.trim="formInline.businessEnvironmentRecord.environmentCode"
                :placeholder="pageType === 'detail' ? '' : '请选择环境记录单编号'"
                class="full-width-input"
                disabled
              >
                <template v-if="pageType !== 'detail'" #append>
                  <el-button
                    size="small"
                    @click="environmentalClick"
                  >
                    选择
                  </el-button>
                </template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="温度(℃):" prop="businessEnvironmentRecord.temperature">
              <el-input
                v-model.trim="formInline.businessEnvironmentRecord.temperature"
                :placeholder="pageType === 'detail' ? '' : '请输入温度(℃)'"
                class="full-width-input"
                :disabled="pageType === 'detail' || formInline.businessEnvironmentRecord.environmentCode !== ''"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="相对湿度(%):" prop="businessEnvironmentRecord.humidity">
              <el-input
                v-model.trim="formInline.businessEnvironmentRecord.humidity"
                :placeholder="pageType === 'detail' ? '' : '请输入相对湿度(%)'"
                class="full-width-input"
                :disabled="pageType === 'detail' || formInline.businessEnvironmentRecord.environmentCode !== ''"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="委托书编号:" prop="businessOrder.orderCode">
              <el-input
                v-model.trim="formInline.businessOrder.orderCode"
                :placeholder="pageType === 'detail' ? '' : '请选择委托书编号'"
                class="full-width-input"
                disabled
              >
                <template v-if="pageType !== 'detail'" #append>
                  <el-button
                    size="small"
                    @click="handleClickOrder"
                  >
                    选择
                  </el-button>
                </template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="委托方代码:" prop="businessOrder.customerNo">
              <el-input
                v-model.trim="formInline.businessOrder.customerNo"
                :placeholder="pageType === 'detail' ? ' ' : '请输入委托方代码'"
                class="full-width-input"
                clearable
                disabled
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="委托方名称:" prop="businessOrder.customerName">
              <el-input
                v-model.trim="formInline.businessOrder.customerName"
                :placeholder="pageType === 'detail' ? ' ' : '请输入委托方名称'"
                class="full-width-input"
                clearable
                disabled
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="委托方电话:" prop="businessOrder.customerPhone">
              <el-input
                v-model.trim="formInline.businessOrder.customerPhone"
                :placeholder="pageType === 'detail' ? ' ' : '请输入委托方电话'"
                class="full-width-input"
                clearable
                disabled
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="委托方地址:" prop="businessOrder.customerAddress">
              <el-input
                v-model.trim="formInline.businessOrder.customerAddress"
                :placeholder="pageType === 'detail' ? ' ' : '请输入委托方地址'"
                class="full-width-input"
                clearable
                disabled
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="样品编号:" prop="customerSampleInfo.sampleNo">
              <el-input
                v-model.trim="formInline.customerSampleInfo.sampleNo"
                :placeholder="pageType === 'detail' ? ' ' : '请输入样品编号'"
                class="full-width-input"
                clearable
                disabled
              >
                <template v-if="pageType !== 'detail'" #append>
                  <el-button
                    size="small"
                    @click="handleClickSample"
                  >
                    选择
                  </el-button>
                </template>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="样品名称:" prop="customerSampleInfo.sampleName">
              <el-input
                v-model.trim="formInline.customerSampleInfo.sampleName"
                :placeholder="pageType === 'detail' ? ' ' : '请输入样品名称'"
                class="full-width-input"
                clearable
                disabled
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="出厂编号:" prop="customerSampleInfo.manufacturingNo">
              <el-input
                v-model.trim="formInline.customerSampleInfo.manufacturingNo"
                :placeholder="pageType === 'detail' ? ' ' : '请输入出厂编号'"
                class="full-width-input"
                clearable
                disabled
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="型号:" prop="customerSampleInfo.sampleModel">
              <el-input
                v-model.trim="formInline.customerSampleInfo.sampleModel"
                :placeholder="pageType === 'detail' ? ' ' : '请输入型号'"
                class="full-width-input"
                clearable
                disabled
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="生产厂家:">
              <el-input
                v-model.trim="formInline.customerSampleInfo.manufacturer"
                :placeholder="pageType === 'detail' ? ' ' : '请输入生产厂家'"
                class="full-width-input"
                clearable
                disabled
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="送检人:">
              <el-input
                v-model.trim="formInline.customerSampleInfo.deliverer"
                :placeholder="pageType === 'detail' ? ' ' : '请输入送检人'"
                class="full-width-input"
                clearable
                disabled
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="联系方式:">
              <el-input
                v-model.trim="formInline.customerSampleInfo.delivererTel"
                :placeholder="pageType === 'detail' ? '' : '请输入联系方式'"
                class="full-width-input"
                clearable
                disabled
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="预计送达时间:">
              <el-date-picker
                v-model="formInline.businessOrder.planDeliverTime"
                type="datetime"
                style="width: 100%;"
                clearable
                :placeholder="pageType === 'detail' ? ' ' : '请选择预计送达时间'"
                format="YYYY-MM-DD hh:mm:ss"
                value-format="YYYY-MM-DD hh:mm:ss"
                disabled
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="要求检完时间:">
              <el-date-picker
                v-model="formInline.businessOrder.requireOverTime"
                type="datetime"
                style="width: 100%;"
                :placeholder="pageType === 'detail' ? ' ' : '请选择要求检完时间'"
                format="YYYY-MM-DD hh:mm:ss"
                clearable
                value-format="YYYY-MM-DD hh:mm:ss"
                disabled
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="检定项目:" prop="customerSampleInfo.measureContent">
              <el-input
                v-model.trim="formInline.customerSampleInfo.measureContent"
                :placeholder="pageType === 'detail' ? ' ' : '请输入检定项目'"
                class="full-width-input"
                clearable
                disabled
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="备注:">
              <el-input
                v-model.trim="formInline.remark"
                :placeholder="pageType === 'detail' ? '' : '请输入备注'"
                class="full-width-input"
                clearable
                :disabled="pageType === 'detail'"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="原始记录模板:" prop="templateName">
              <el-input
                v-model.trim="formInline.templateName"
                :placeholder="pageType === 'detail' ? '' : '请选择原始记录模板'"
                class="full-width-input"
                clearable
                disabled
              >
                <template v-if="pageType !== 'detail'" #append>
                  <el-button
                    size="small"
                    @click="handleClickTemplate"
                  >
                    选择
                  </el-button>
                </template>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="原始记录附件:" prop="contactInfo">
              <show-photo v-if="formInline.originalRecordFile" :minio-file-name="formInline.originalRecordFile" />
              <span v-else-if="pageType === 'detail'">无</span>
              <input v-show="pageType === ''" ref="fileRef" type="file" @change="onFileChange">
              <el-button v-if="pageType !== 'detail'" id="file" type="primary" :disabled="pageType === 'detail'" :style="{ 'margin-left': formInline.originalRecordFile === '' ? '0px' : '20px' }" @click="upload">
                {{ formInline.originalRecordFile === '' ? '上传' : '更换附件' }}
              </el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </detail-page>
    <detail-block title=" 所用设备">
      <template v-if="pageType !== 'detail'" #btns>
        <el-button v-if="pageType !== 'detail'" type="primary" @click="multiAddMeasureDevice">
          批量添加
        </el-button>
        <el-button v-if="pageType !== 'detail'" type="primary" @click="addMeasureDeviceRow">
          增加行
        </el-button>
        <el-button
          v-if="pageType !== 'detail'"
          type="info"
          @click="delMeasureDeviceRow"
        >
          删除行
        </el-button>
      </template>
      <el-table
        :data="formInline.equipmentInfoList"
        border
        style="width: 100%;"
        @selection-change="handleSelectionChangeMeasureDevice"
      >
        <el-table-column
          v-if="pageType !== 'detail'"
          type="selection"
          width="38"
        />
        <el-table-column align="center" label="序号" width="80" type="index" />
        <el-table-column
          v-for="item in columns"
          :key="item.value"
          :prop="item.value"
          :label="item.text"
          :width="item.width"
          align="center"
        >
          <template #header>
            <span v-show="item.required" style="color: red;">*</span><span>{{ item.text }}</span>
          </template>
          <template
            v-if="item.text === '设备名称' && pageType !== 'detail'"
            #default="scope"
          >
            <el-input
              v-model="scope.row[item.value]"
              :placeholder="`${item.text}`"
              class="input"
              disabled
            >
              <template v-if="item.choose" #append>
                <el-button
                  v-if="pageType !== 'detail'"
                  size="small"
                  type="primary"
                  @click="handleClickMeasureDevice(scope.$index)"
                >
                  选择
                </el-button>
              </template>
            </el-input>
          </template>
        </el-table-column>
      </el-table>
    </detail-block>
    <detail-block title="所依据的技术文件">
      <template v-if="pageType !== 'detail'" #btns>
        <el-button v-if="pageType !== 'detail'" type="primary" @click="multiAddFiles">
          批量添加
        </el-button>
        <el-button type="primary" @click="addFilesRow">
          增加行
        </el-button>
        <el-button type="info" @click="delFilesRow">
          删除行
        </el-button>
      </template>
      <el-table
        :data="formInline.fileList"
        border
        style="width: 100%;"
        @selection-change="handleSelectionChangeFiles"
      >
        <el-table-column
          v-if="pageType !== 'detail'"
          type="selection"
          width="38"
        />
        <el-table-column align="center" label="序号" width="80" type="index" />
        <el-table-column
          v-for="item in columnsFiles"
          :key="item.value"
          :prop="item.value"
          :label="item.text"
          :width="item.width"
          align="center"
        >
          <template #header>
            <span v-show="item.required" style="color: red;">*</span><span>{{ item.text }}</span>
          </template>
          <template
            v-if="item.text === '文件编号' && pageType !== 'detail'"
            #default="scope"
          >
            <el-input
              v-model="scope.row[item.value]"
              :placeholder="`${item.text}`"
              class="input"
              disabled
            >
              <template v-if="item.choose" #append>
                <el-button
                  v-if="pageType !== 'detail'"
                  size="small"
                  @click="handleClickFiles(scope.$index)"
                >
                  选择
                </el-button>
              </template>
            </el-input>
          </template>
        </el-table-column>
      </el-table>
    </detail-block>
  </app-container>
  <!-- 选择设备弹窗 -->
  <select-measure-device v-model:visible="measureDeviceVisible" :is-multi="isMultiMeasureDevice" @confirm-checkout="confirmCheckoutMeasureDevice" @change-visible="changeMeasureDeviceVisible" />
  <!-- 选择环境记录单弹窗 -->
  <environmental-dialog ref="environmentalDialog" @add="environmentalAdd" />
  <!-- 选择委托书组件 -->
  <select-order v-model:visible="orderVisible" @confirm-checkout="confirmCheckoutOrder" @change-visible="changeOrderVisible" />
  <!-- 选择样品组件 -->
  <select-sample v-model:visible="sampleVisible" :order-id="formInline.orderId" :customer-id="formInline.customerId" @click-confirm-sample="clickConfirmSample" @change-visible="changeSampleVisible" />
  <!-- 选择原始记录模板 -->
  <select-template ref="templateDialog" @add="confirmCheckoutTemplate" />
  <!-- 选择所依据的技术文件（在用的计量规程） -->
  <select-files v-model:visible="filesVisible" :is-multi="isMultiFiles" @confirm-checkout="confirmCheckoutFiles" @change-visible="changeFilesVisible" />
</template>

<style lang="scss">
.el-upload-list {
  display: none !important;
}
</style>